<template>
    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{message}}</p>
    <!-- 注意在 <textarea> 中是不支持插值表达式的。请使用 v-model 来替代： -->
    <textarea v-model="message" placeholder="Add multiple lines"></textarea>

    <!-- 单一的复选框，绑定布尔类型值 -->
     <input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>


<!-- for 属性的值必须与目标表单控件的 id 属性值相同 -->
<div>Checked names: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>

<!-- 对于单选按钮，复选框和选择器选项，v-model 绑定的值通常是静态的字符串 
 (或者对复选框是布尔值)：
  -->
  <!-- `picked` 在被选择时是字符串 "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 只会为 true 或 false -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` 在第一项被选中时为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>
<!-- true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。
 这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值 -->
<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />
</template>

<script setup>
import { ref } from 'vue'
const message=ref('')
const checked=ref(false)
const checkedNames=ref([])

</script>

<style lang="scss" scoped>

</style>